<template>
  <div class="inform">
    <div class="inform-main" @click="addEmptyInform()">
      <div class="inform-main-content">
        <SquareButton :iconEntity="iconMap['add']" height="100%" width="100%" :iconSize="32" bgColor="#fff" :izDark="true"/>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import SquareButton from '@renderer/components/button/SquareButton.vue';
import { iconMap } from '@renderer/composables/iconUtils'
import { useInformStore } from '@renderer/stores/informStore';
const informStore = useInformStore();

// 添加一个空的闹钟
function addEmptyInform() {
  informStore.addEmptyInform();
}
</script>

<style lang="scss" scoped>
.inform {
  width: 100%;
  height: 80px;
  padding: 5px;
  padding-right: 10px;

  .inform-main {
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 10px;
    padding: 5px;

    .inform-main-content {
      width: 100%;
      height: 100%;
      border: 2px dashed #cdcdcd;
      border-radius: 10px;
      opacity: 0.7;
      &:hover {
        opacity: 1;
      }
    }
  }
}
</style>
